<template>
  <div class="flex-container">
    <div class="left">
      <course-catalogue-list @clickPeriodHandle="clickPeriodHandle"/>
    </div>
    <div class="right">
      <upload-courseware-list :select-period="selectPeriod" v-if="selectPeriod.id" />
    </div>
  </div>

</template>

<script>
import CourseCatalogueList from "./courseCatalogueList";
import UploadCoursewareList from "./uploadCoursewareList";

export default {
  name: 'Chapter',
  components: { UploadCoursewareList, CourseCatalogueList },
  data() {
    return {
      imageUrl: '',
      radio: 1,
      List: [
        {
          id: 1,
          title: "上传主件"
        },
        {
          id: 2,
          title: "上传附件"
        },
        {
          id: 3,
          title: "上传资料"
        },
        {
          id: 4,
          title: "章节测试"
        }
      ],
      isActive: "上传主件",
      isActiveId: 1,
      id: '',
      myHeader: {
        token: window.localStorage.getItem("token")
      },
      selectChapter: {},
      selectPeriod: {}

    };
  },
  methods: {
    //课程检测
    changeHandle(Item) {
      if (Item.id === 4) {
        this.$router.push("/CreatTest")
      }
      this.isActiveId = Item.id;
      this.isActive = Item.title;
    },
    success(data) {
      this.addCoursewareForPeriod(data.data.url)
    },
    clickPeriodHandle(chapter, period) {
      this.selectChapter = chapter;
      this.selectPeriod = period;
    }
  }

};
</script>


<style scoped lang="scss">
.flex-container {
  display: flex;


  & > .left {
    width: 30%;
    max-width: 350px;
    height: 36.25rem;
  }

  .right {
    display: flex;
    flex: 1;
  }
}

.main-ul > li {
  padding: 1.5rem;
}

.main-ul > li > div > span {
  margin-left: 0.625rem;
}

.right_Item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

}

.Main {
  color: #a3a3a3;
  border: #b5b5b5 solid 0.0625rem;
}
</style>
